<template>
  <section class="list-news-img bg-white d-scroll-2head">

  <cube-scroll
    ref="scroll"
    :options="options"
    :scrollEvents="['scroll-end']"
    @pulling-up="onPullingUp"
    @pulling-down="onPullingDown"
    @scroll-end="scrollEnd"
    v-remainScroll="'redCloudHeadlineListComponent'+currentIndex"
  >
    <div class="item" @click="goDetail(item)" v-for="(item,index) in topList" :key="index">
      <!--      没有图片则不显示-->
      <div class="img" v-if="tools.indexOfHttp(item.listPicUrl)">
        <img :src="item.listPicUrl" alt="">
      </div>
      <div class="img" v-else-if="item.listPic">
        <img :src="tools.getImgUrl(item.listPic,true)" alt="">
      </div>
      <!--      没有图片则不显示结束-->
      <div class="cont">
        <h2 class="title" ><div class="hower"><span class="top-flag" v-if="chanelId==='2'">置顶</span>{{item.title}}</div></h2>
        <div class="tip no-wrap">
          <span class="no-wrap">{{tools.formatDate(item.createTime)}}</span>
          <span class="source">{{item.source || '未知'}}</span>
          <span v-if="chanelId === '5'" class="no-wrap">阅读  {{item.views || 0}}</span>
          <broadcast v-else :item="item"/>
        </div>
      </div>
    </div>
    <section @click="goGroupInfo()" class="item" v-if="currentIndex===0">
      <div class="img">
        <img src="../../../../static/images/dangjian/home/groupinfo.png" alt="">
      </div>
      <div class="cont">
        <h2 class="title" ><div class="hower"><span class="top-flag">置顶</span>贵阳组工信息</div></h2>
        <div class="tip no-wrap">
<!--          <span class="no-wrap">{{tools.formatDate(groupInfo.createTime)}}</span>-->
          <span class="source"></span>
          <span class="no-zugong">点击量  {{groupInfoClickData || 0}}</span>
        </div>
      </div>
      <!--<span class="read-number" v-if="groupInfoClickData>0">点击量：{{groupInfoClickData}}</span>-->
    </section>
    <div class="item" @click="goDetail(item)" v-for="(item,index) in recommend" :key="'n-'+index">
      <!--      没有图片则不显示-->
      <div class="img" v-if="tools.indexOfHttp(item.listPicUrl)">
        <img :src="item.listPicUrl" alt="">
      </div>
      <div class="img" v-else-if="item.listPic">
        <img :src="tools.getImgUrl(item.listPic,true)" alt="">
      </div>
      <!--      没有图片则不显示结束-->
      <div class="cont">
        <h2 class="title"><div class="hower">{{item.title}}</div></h2>
        <div class="tip no-wrap" v-if="item.zhuanji != 1">
          <span class="no-wrap">{{tools.formatDate(item.createTime)}}</span>
          <span class="source">{{item.source || '未知'}}</span>
          <span v-if="chanelId === '5'" class="no-wrap">阅读  {{item.views || 0}}</span>
          <broadcast v-else :item="item"/>
        </div>
      </div>
    </div>
    <div class="item" @click="goDetail(item)" v-for="(item,index) in list" :key="'m' + index">
<!--      没有图片则不显示-->
      <div class="img" v-if="item.picOssUrl && tools.indexOfHttp(item.picOssUrl)">
        <img :src="item.picOssUrl" alt="">
      </div>
      <div class="img" v-else-if="tools.indexOfHttp(item.listPicUrl)">
        <img :src="item.listPicUrl" alt="">
      </div>
      <div class="img" v-else-if="item.listPic">
        <img :src="tools.getImgUrl(item.listPic,true)" alt="">
      </div>
<!--      没有图片则不显示结束-->
      <div class="cont">
        <h2 class="title"><div class="hower">{{item.title}}</div></h2>
        <div class="tip no-wrap" v-if="item.zhuanji != 1">
          <span class="no-wrap">{{tools.formatDate(item.createTime)}}</span>
          <span class="source">{{item.source || '未知'}}</span>
          <span v-if="chanelId === '5'" class="no-wrap">阅读  {{item.views || 0}}</span>
          <broadcast v-else :item="item"/>
        </div>
      </div>
    </div>
    <fetchData :loading="isLoading" :data="list"></fetchData>
    <noData v-if="!hasList() && !isLoading"></noData>
    <onBottom v-else-if="onBottom"></onBottom>
  </cube-scroll>

</section>
</template>

<script>
  import _ from 'lodash'
  import Axios from "axios";
  export default {
    props: ['currentIndex', 'chanelId','channelName'],
    name: 'redCloudHeadlineListComponent',
    data () {
      return {
        groupInfoClickData: 0,
        groupInfo: {},
        pageIndex: 1,
        pageSize: 10,
        menuId: '',
        isLoading: true,
        menuList: [],
        list: [],
        topList: [],
        recommend: [],
        options: {
          pullUpLoad: true,
          pullDownRefresh: {
            txt: ' '
          },
          scrollbar: false
        },
        all: {
          list: [],
          topList: [],
          recommend: []
        },
        excludeIds: [],
        onBottom:false,
        newsDetail: {
          newsContent: null,
          files: null,
          upOrDown: null,
          collected: null,
        },
        dictList:[],//分类字典
      }
    },
    watch: {
      $route (to, from) {
        let routeName = to.name
        if (routeName !== 'redCloudHeadline') {
          return false
        }
        this.init()
      },
    },
    created () {
      if (this.currentIndex === 0) {
        this.getDictValue()
        this.groupInfoClick()
      }
    },
    activated () {
      this.$nextTick(() => {
        if (this.list.length > 0 && this.y !== undefined && this.$refs.scroll) {
          console.log('resume position')
          this.$refs.scroll.scroll.scrollTo(0, this.y)
        }
        if(this.currentIndex === 0){
        this.fetchService.groupInfoClick('0').then(res => {
          console.log('groupInfoClick', res)
          if (res.code === 0) {
            this.groupInfo = res.data
            this.groupInfoClickData = res.data.number
          }
        })}
        this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
      })
      // if (this.currentIndex === 1) {
      //   this.groupInfoClick()
      // }
    },
    mounted () {
      console.log(this.$route.name, 'mounted')
      // 第一次加载时候也需要加载
      this.init()
    },
    methods: {
      init () {
        let index = this.$route.query.index
        console.log('this.menuIdthis.menuId=',this.chanelId);
        if (index != this.currentIndex) {
          return false
        }
        this.menuId = this.chanelId
        // 只有当初始化没有数据时才会请求数据
        if (this.list.length === 0) {
          this.fetchList(this.chanelId)
        }
      },
      goDetail (item) {
        //数据为视频
        this.$store.state.tempListData = this;
        if (this.getDictItem(item.channelId) ==='1') {//数据为长视频
            this.$store.state.isVideo = true
            this.$store.state.videoDetail = item
            this.$store.state.newsDetail = item
            // 缓存专辑数据
            // this.$store.state.zhuanjiList = this.list
            // 带上专辑标识，详情页进行连续播放
            this.$router.push({name: 'videoDetail', query: {id: item.id}})
        }else if (this.getDictItem(item.channelId) ==='2') { //数据为音频
            this.$store.state.isVideo = false
            this.$store.state.videoDetail = item
            this.$store.state.newsDetail = item
            this.$router.push({name: 'videoDetail', query: {id: item.id}})
        }else if (this.getDictItem(item.channelId) ==='3') { //数据为短视频
            this.playVideo(item);
        }else if (item.zhuanji === 1) {
          this.$router.push({name: 'redCloudHeadlineList', query: {id: item.id,channelName:this.channelName}})
        } else {
          this.$store.state.newsDetail = item
          this.$router.push({name: 'redCloudNewsDetail', params: {id: item.id,channelName:this.channelName}})
        }
      },
      playVideo(item, index) {
        // this.$store.state.newsDetail = item;
        this.tools.showLoading();
        var me = this;
        return Axios.all([
          me.contentDetailNew(item),
          me.newsFiles(item),
          me.contentGetSfdz(item),
          me.contentGetSfsc(item),
        ])
          .then(
            Axios.spread((res1, res2, res3, res4) => {
              console.log('item1',item)
              me.tools.hideLoading();
              me.newsDetail.newsContent = res1;
              item = res1
              me.newsDetail.files = res2;
              me.newsDetail.upOrDown = res3;
              me.newsDetail.collected = res4;
              // item.id = item.contentId;
              item.detail = me.newsDetail;
              me.$store.state.newsDetail = item;
              me.$createVideoPlayerComponent({
                $props: {
                  videoUrl: me.tools.indexOfHttp(res2[0].fileOssUrl ) ? res2[0].fileOssUrl : me.tools.getImgUrl(res2[0].fileId),
                },
              }).show();
              return false;
            })
          )
          .catch((err) => {
            console.log(err.response);
          });
      },
      //获取内容详情(新)
      contentDetailNew(v) {
        let me = this;
        return me.fetchService.contentDetailNew(v.id).then((res) => {
          if (res.code === 0) {
            return res.data.newsContent;
          }
        });
      },
      //获取新闻附件
      newsFiles(v) {
        let me = this;
        return me.fetchService.newsFiles(v.id).then((res) => {
          if (res.code === 0) {
            return res.data;
          }
        });
      },
      //查询当前用户是否点赞指定的新闻
      contentGetSfdz(v) {
        let me = this;
        return me.fetchService.contentGetSfdz(v.id).then((res) => {
          if (res.code === 0) {
            return res.data;
          }
        });
      },
      //查询当前用户是否收藏指定的新闻
      contentGetSfsc(v) {
        let me = this;
        return me.fetchService.contentGetSfsc(v.id).then((res) => {
          if (res.code === 0) {
            return res.data;
          }
        });
      },
      //请求字典值-轮播类型
      getDictValue() {
        let data = {
          catKey: "HYTT",
          treeKey: "LMLX",
        };
        this.fetchService.dictValue(data).then((res) => {
          if(res.code !== 0){
            return
          }
          if (res.code === 0 && res.data.length>0) {
            this.dictList = res.data;
          }
        });
      },
      getDictItem(channelId){
        for (let i = 0; i < this.dictList.length; i++) {
          if(this.dictList[i].key === channelId){
            return this.dictList[i].value
          }
        }
      },
      goGroupInfo () {
        this.$store.commit('addRoute','groupInfoList')
//        this.groupInfoClickAdd()
        this.$router.push({name: 'groupInfoList'})
      },
      groupInfoClickAdd () {
        let data = {
          clickType: '0'
        }
        this.fetchService.groupInfoClickAdd(data).then(res => {
          if (res.code !== 0) {
            this.tools.tip(res.message)
          }
        })
      },
      fetchList (id) {
        this.excludeIds = []
        this.topList.map((v) => {
          this.excludeIds.push(v.id)
        })
        this.recommend.map((v) => {
          this.excludeIds.push(v.id)
        })
        this.isLoading = true
        id = id || this.menuId
        let data = {
          "channelId": id || "",
          "pageNo": this.pageIndex,
          "pageSize": this.pageSize,
          "summary": "",
          "title": "",
          excludeIds: this.excludeIds
        }
        if(id==='2'){
          // return this.fetchService.contentPage(data).then(res => {//调用原来的接口
          return this.fetchService.recommendPage(data).then(res => {//红云头条》推荐栏目 接口 20201111修改
            this.isLoading = false
            if (res.code !== 0) {
              return this.tools.alert(res.message || res.resp_msg)
            }
            this.$refs.scroll && this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
            if (this.pageIndex === 1) {
              this.list = []
              this.topList = []
              this.recommend = []
            }
            let top = res.data.top || []
            this.topList = this.tools.uniqueById(this.topList.concat(top)) //根据id去重
            this.list = this.tools.uniqueById(this.list.concat(res.data.page))//根据id去重
            let recommendList = res.data.recommend || []
            this.recommend = this.tools.uniqueById(this.recommend.concat(recommendList)).slice(0,3)//根据id去重（并截取前三条数据）
            this.pageIndex ++
            // if (res.data.page.length === 0 && top.length === 0) {
            //   this.tools.tip('暂无更多')
            // }
            return res
          })
        }else{
          // return this.fetchService.contentPage(data).then(res => {//调用原来的接口
            return this.fetchService.specialList(data).then(res => {//调用带合集的通用接口
              this.isLoading = false
            if (res.code !== 0) {
              return this.tools.alert(res.message || res.resp_msg)
            }
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
            if (this.pageIndex === 1) {
              this.list = []
              this.topList = []
              this.recommend = []
            }
            if(res.data.album.length === 0 && res.data.page.length === 0){
              this.onBottom = true
              this.options.pullUpLoad = false
            }
            if (res.data.album && res.data.album.length > 0) {
              res.data.album.map((v) => {
                v.title = v.channelName
                v.listPic = v.pic
                v.zhuanji = 1
              })
              this.list = this.list.concat(res.data.album)
            }
            res.data.page.forEach(item=>{
              if(item.isTop=== 1){
                // let top = res.data.top || []
                this.topList = this.topList.concat(item)
              }else{
                this.list = this.list.concat(item)
              }
            })
            let recommendList = res.data.recommend || []
            this.recommend = this.recommend.concat(recommendList)
            this.pageIndex ++
            // if (res.data.page.length === 0 && top.length === 0) {
            //   this.tools.tip('暂无更多')
            // }
            return res
          })
        }

      },
      groupInfoClick () {
        if(this.groupInfoClickData==0){
          this.fetchService.groupInfoClick('0').then(res => {
            console.log('groupInfoClick', res)
            if (res.code === 0) {
              this.groupInfo = res.data
              this.groupInfoClickData = res.data.number
            }
          })
        }
      },
      hasList () {
        return this.list.length > 0 || this.topList.length > 0
      },
      onPullingDown () {
        console.log('onPullingDown')
        if(this.currentIndex === 0){
        this.groupInfoClick()
        }
        this.pageIndex = 1
        this.list = []
        this.topList = []
        this.fetchList()
        this.onBottom = false
        this.options.pullUpLoad = true
      },
      onPullingUp () {
        this.fetchList().then(res => {
          setTimeout(() => {
            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
            this.options.isPullUpLoad = false
          }, 100)
        })
      },
      scrollEnd ({x, y}) {
        this.y = y
        console.log('scrollEnd', this.y)
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .head-bd {
    transform:translateX(pxToRem(-35px));
  }

  .home-banner-wrap {
    background: rgba(255, 255, 255, 0.9);
    height: pxToRem(350px);
    width: 100%;
    .home-banner {
      position: relative;
      @include fullImg();

      .text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        color: #fff;
        padding: 5px 8px;
        overflow: hidden;
      }
      img {
        @include fullImg();
      }
    }
  }
  .home-icon-btns {
    background: rgba(255, 255, 255, 0.9);
    padding: pxToRem(54px) 0 pxToRem(40px);
    .icon-btns {
      .item {
        .img {
          margin-bottom: pxToRem(14px);
        }
      }
    }
  }
  .scroll-imgs {
    background: rgba(255, 255, 255, 0.9);
    padding: pxToRem(20px);
    padding-top: 0;
    overflow-y: auto;
    ul {
      display: flex;
    }
    li {
      width: pxToRem(496px);
      height: pxToRem(198px);
      flex-shrink: 0;
      border: 1px solid rgba(255, 183, 183, 1);
      box-shadow: 0px 4px 6px 0px rgba(54, 0, 0, 0.23);
      margin-right: pxToRem(20px);
      &:last-child {
        /*margin-right:0;*/
      }
      img {
        @include fullImg();
      }
    }
  }
  .platform {
    background: rgba(255, 255, 255, 0.9);
    margin: pxToRem(30px) 0;
    padding: pxToRem(30px) pxToRem(37px);
    h2 {
      font-size: pxToRem(26px);
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      margin-bottom: pxToRem(30px);
      .more-text {
        color: $theme-color;
        font-size: pxToRem(20px);
        float: right;
      }
    }
    .list-squareness {
      display: flex;
      justify-content: space-between;
      li {
        width: pxToRem(210px);
        height: pxToRem(210px);
        background: rgba(255, 250, 241, 1);
        box-shadow: 0px 4px 6px 0px rgba(54, 0, 0, 0.1);
        border-radius: pxToRem(6px);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        img {
          width: pxToRem(98px);
          height: pxToRem(98px);
          border-radius: 100%;
          margin-bottom: pxToRem(12px);
        }
      }
    }
  }

  /*组工信息*/
  .top-banner {
    height:195px;
    position: relative;
    /*border:1px solid rgba(192, 192, 192, 0.55);*/
    img {
      @include fullImg();
    }
    .read-number {
      position:absolute;
      right:80px;
      bottom:10px;
      color:#666;
      font-size: 14PX;
    }
  }
  .no-zugong{
    /*margin-right: 1%;*/
  }
  .cont {
    .title {
      position: relative;
      height:3em;
      overflow:hidden;
    }
  }
  .hower{
    font-size: 16PX;
    font-weight: normal;
    /*min-height: 3em;*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
    position: absolute;
    top:50%;
    transform: translateY(-50%);
  }
</style>

